<template>
	<div>
		<a-row type="flex" justify="center" style="margin: 10px; 0">
			<a-col :span="2">
				<a-button type="primary" @click="salesColor('销售色管理')">销售色管理</a-button>
			</a-col>
			<a-col :span="2">
				<a-button type="primary" @click="salesColor('尺码信息')">尺码信息</a-button>
			</a-col>
			<a-col :span="2">
				<a-button type="primary" @click="salesColor('件数信息')">件数信息</a-button>
			</a-col>
			<a-col :span="2">
				<a-button type="primary" @click="salesColor('原样信息')">原样信息</a-button>
			</a-col>
			<a-col :span="2">
				<a-button type="primary">保存</a-button>
			</a-col>
			<a-col :span="2">
				<a-button type="primary">提交</a-button>
			</a-col>
		</a-row>
		<div>
			<div style="display: flex;justify-content: start;">
				<div :class="flag===index?'tag2':'tag1'" v-for="(item,index) in tags" :key="index"
					@click="tagbtn(index)">{{ item }}
				</div>
			</div>
		</div>
		<div>
			<dmaterial v-if="flag==0"></dmaterial>
			<dmimension v-if="flag==1" class="informationyoyal"></dmimension>
			<rrequirement v-if="flag==2" class="informationyoyal"></rrequirement>
			<prroblem v-if="flag==3" class="informationyoyal"></prroblem>
			<inrformation v-if="flag==4" class="informationyoyal"></inrformation>
		</div>
	</div>
</template>
<script>
	import dmaterial from './material'
	import dmimension from './dimension'
	import rrequirement from './requirement'
	import prroblem from './prroblem'
	import inrformation from './information'
	export default {
		components: {
			dmaterial,
			dmimension,
			rrequirement,
			prroblem,
			inrformation
		},
		data() {
			return {
				tags: ['物料', '尺寸', '款式要求', '问题闭环', '款式其他信息'],
				flag: 0,
				billNo:''
			}
		},
		mounted() {
			this.billNo = this.$route.query.billNo 
		},
		methods: {
			tagbtn(index) {
				this.flag = index
			},

			salesColor(value) {
				switch (value) {
					case "销售色管理":
						this.$router.push({
							path:'/spection/Designlist/salesColor/index',
							query: {
							  billNo: this.billNo 
							}
						})
						break;
					case "尺码信息":
						this.$router.push({
							path:'/spection/Designlist/sizingInformation/index',
							query: {
							  billNo: this.billNo 
							}
						})
						break;
					case "件数信息":
						this.$router.push({
							path:'/spection/Designlist/Piece/index',
							query: {
							  billNo: this.billNo 
							}
						})
						break;
					case "原样信息":
						this.$router.push('/spection/Designlist/original/index')
				}

			}
		},
	}
</script>
<style scoped>
	.tag2 {
		box-sizing: border-box;
		height: 40px;
		width: 90px;
		background-color: #bbdbfc;
		justify-content: center;
		line-height: 40px;
		margin-left: 20px;
		text-align: center;
	}

	.tag1 {
		box-sizing: border-box;
		height: 40px;
		width: 90px;
		justify-content: center;
		line-height: 40px;
		text-align: center;
		margin-left: 20px;
		background-color: #f9f8f8;
		border: 1px solid #f9f8f8;
	}

	.informationyoyal {
		margin-top: 20px;
	}
</style>